<script lang="ts" setup>
import { formRule } from './rule'
import type { SysDeptListType, SysDeptWriteParamsType } from '../utils/model'
import { getDeptDetailsAPI } from '../utils/api'
import { getAllParentIds } from '@/utils/dept'
import type { SysUserListSelectType } from '@/views/admin/system/user/utils/model'

type Props = {
  id?: number
  pid?: number
  treeData: SysDeptListType[]
  userList: SysUserListSelectType[]
  title: string
}

// 表单Ref
const formRef = ref()
// props
const { id, treeData, pid, title, userList } = defineProps<Props>()
//加载状态
const loading = ref(false)
// 表单数据
const formState = ref<SysDeptWriteParamsType>({
  deptName: '',
  leaderIds: [],
  status: 1
})
// 选中的key
const deptSelectKeys = ref<number[]>([])

// 判断是否是修改
if (title == '新增') {
  deptSelectKeys.value = getParentId(id)
  if (deptSelectKeys.value) {
    formState.value.pid = deptSelectKeys.value[deptSelectKeys.value.length - 1]
  }
} else if (title == '编辑') {
  getDetails(id)
}

// 获取父级id
function getParentId(id: number | undefined) {
  if (id == undefined) return
  const ids = getAllParentIds(id, treeData)
  console.log(ids)
  return ids[0] == 0 ? [] : ids
}

/** 获取部门详情 */
async function getDetails(id: number) {
  loading.value = true
  getDeptDetailsAPI(id).then((res) => {
    let details = res.data
    Object.assign(formState.value, details)
    deptSelectKeys.value = getAllParentIds(details.id, treeData)
    deptSelectKeys.value.pop()
    loading.value = false
  })
}

function getRef() {
  return formRef.value
}

// 部门选择
function changeDeptSelect(value: number[] | undefined) {
  formState.value.pid = value == undefined ? 0 : value[value.length - 1]
}

const filterOption = (input: any, option: any) => {
  const userIds = userList.filter((item) => item.username.includes(input))
  for (let i = 0; i < userIds.length; i++) {
    if (userIds[i].id == option.value) {
      return true
    }
  }
  return false
}

defineExpose({ getRef })
</script>

<template>
  <a-spin :spinning="loading">
    <a-form
      ref="formRef"
      :labelCol="{ style: { width: '95px' } }"
      :model="formState"
      :rules="formRule"
      label-align="left"
      style="margin-top: 15px"
    >
      <a-row :gutter="30">
        <a-col :span="24">
          <a-form-item label="上级部门" name="pid">
            <a-cascader
              v-model:value="deptSelectKeys"
              :field-names="{ label: 'deptName', value: 'id', children: 'children' }"
              :options="treeData"
              change-on-select
              placeholder="请选择上级部门"
              @change="changeDeptSelect"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="部门名" name="deptName">
            <a-input v-model:value="formState.deptName" placeholder="请输入部门名" type="text" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="部门负责人" name="leaderIds">
            <a-select
              v-model:value="formState.leaderIds"
              :filter-option="filterOption"
              mode="multiple"
              placeholder="请选择部门负责人"
            >
              <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{
                item.username
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <SpDict
            v-model="formState.status"
            dictType="sys_dept_status"
            label="状态"
            name="status"
            type="radio"
          />
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<style scoped></style>
